<template>
	<view>
		<PageHead backPath="/pages/user/index?p=3"></PageHead>
		<view class="pl-30 pr-30 mt-20">
			<u-form :model="formData" class="mb-15">
				<u-form-item @click="showAllSociety">
					<u--input
						disabled
						disabledColor="#ffffff"
						placeholder="请选择类别"
						class="feedback-input"
						v-model="formData.society.title"
					></u--input>
					<u-icon slot="right" name="arrow-right" color="#fff"></u-icon>
				</u-form-item>
				<u-form-item>
					<u--textarea
						v-model="formData.content"
						style="min-height: 120px;"
						autoHeight
						confirmType="done"
						maxlength="255"
						count
						placeholder="申请理由"
					></u--textarea>
				</u-form-item>
			</u-form>
			<Acard pad="12px" width="200px" @click.native="sendRequest"><view class="fs-center">发送申请</view></Acard>
			<view class="fs-white">Tip：重复提交申请，只有最后一次申请被管理员获取</view>
			<u-picker :show="showSociety" :columns="actions" keyName="title" @confirm="confirm"></u-picker>
		</view>
		<ParticleBackground></ParticleBackground>
	</view>
</template>

<script>
import { mapState } from 'vuex';
export default {
	name: 'Request',
	data() {
		return {
			showSociety: false,
			formData: {
				society: {
					title: ''
				},
				content: ''
			}
		};
	},
	mounted() {
		this.getAllSocietys();
	},
	methods: {
		showAllSociety() {
			this.showSociety = true;
			uni.hideKeyboard();
		},
		confirm(e) {
			this.formData.society = e.value[0];
			this.showSociety = false;
		},
		async sendRequest() {
			let { society, content } = this.formData;
			if (society.title.length > 0) {
				let result = await uni.$u.http.post('/society/join', {
					user_id: this.$store.getters.user_id,
					society_id: society.id,
					content,
					apply_time: Date.now()
				});
				if(result.data.code === 200){
					uni.showToast({
						title: '成功',
						icon: 'success',
						duration: 2000
					});
				}
			} else {
				uni.showToast({
					title: '还未选择社团',
					icon: 'error',
					duration: 2000
				});
			}
		},
		async getAllSocietys() {
			await this.$store.dispatch('society/getAllSocietys');
		}
	},
	computed: {
		actions() {
			return [this.$store.state.society.allSocietys];
		}
	}
};
</script>

<style scoped lang="scss"></style>
